<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		div{
				width: 300px;
				height: 300px;
				border: 1px solid red;
		}
		
			img{
				position: absolute;
            left: 30px;
            top: 20px;
			}
			.box{
			 transform:translate(120px);
            -webkit-transform:translate(120px);
            -moz-transform:translate(120px);
            -ms-transform:translate(120px);
			}
			.box1{
			 transform:translateY(130px);
            -webkit-transform:translateY(130px);
            -moz-transform:translateY(130px);
            -ms-transform:translateY(130px);
			}
			.box2{
			 transform:translate(130px,130px);
            -webkit-transform:translate(130px,130px);
            -moz-transform:translate(130px,130px);
            -ms-transform:translate(130px,130px);
			}
		</style>
	</head>
	<body>
		<div>
		<img src="img/tx.jpg" id="img"/>
	
		</div>
			<input type="button" value="横向移动" id="btn1" onclick="fn()"/>
		<input type="button" value="纵向移动" id="btn2" onclick="fn1()"/>
		<input type="button" value="横向、纵向同时移动" id="btn3" onclick="fn2()"/>
		<script type="text/javascript">
			 function fn(){
			 	var img=document.getElementById("img");
			 	img.className="box";
			 }
			 function fn1(){
			 	var img=document.getElementById("img");
			 	img.className="box1";
			 }
			 function fn2(){
			 	var img=document.getElementById("img");
			 	img.className="box2";
			 }
		</script>
	</body>
</html>
